import React from 'react';
import ImageLazy from '../commons/ImageLazy';
import NavLink from '../commons/NavLink';
import { connect } from 'react-redux';
import {hashHistory } from 'react-router'
import {mall_them_hos_servItem_det,servItem_caseList} from '../../actions';
import {getHosImg,getDocImg,getServImg,getCaseImg,BindMixin} from '../../actions/ActionTypes';


const m_serv_det_icon1 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/m_ser_det_icon1.jpg');
const m_serv_det_icon2 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/m_ser_det_icon2.jpg');
const m_serv_det_icon3 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/m_ser_det_icon3.jpg');
const m_ser_det_tel = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/m_serv_det_tel.png');
const mall_vip = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/mall_vip.png');
const arr_right = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/arr_right.png');


var myDefault =  React.createClass({
  mixins:[BindMixin],
  componentDidMount:function(){
    this.setActive();

    const {dispatch} = this.props;
    dispatch(mall_them_hos_servItem_det(this.props.id));
    dispatch(servItem_caseList(this.props.id));

    // 添加到购物车
    var _this = this;
    var userId = this.props.userId || 0;
    $('.buy_now').click(function(){
      // alert($('.menu var').text());
      if(!_this.props.user_logined){
        _this.no_login(!_this.props.user_logined);
      }else{
        // add_shopcar(userId,_this.props.hospitalId,_this.props.id,1);
        // dispatch(get_add_shopcar(userId,function(){
        //   hashHistory.push("/user/confirm_order/" + _this.props.id)
        // }));
        hashHistory.push("/user/confirm_order/" + _this.props.id)
      }

    })
    // 点击展开
    $('.m_serv_det .more').each(function(){
      let statu = $(this).statu = false;
      let h = $(this).parent('.item').find('.mytxt').css('height');
      $(this).tap(function(){
        statu = !statu;
        let my_em =$(this).find('em');
        let this_txt = $(this).parent('.item').find('.mytxt');
        let this_h = this_txt.find('.wrapper').height();
        if(statu){
          my_em.html('&#9650;')
          $(this).parent('.item').find('.mytxt').height(this_h)
        }else{
          my_em.html('&#9660;')
          $(this).parent('.item').find('.mytxt').height(h)
        }

      })
    })
  },
  componentWillUnmount:function(){
    const {dispatch} = this.props;
    // dispatch(get_add_shopcar(this.props.userId));
  },
  setActive:function(){
    $('.scroll_menu').on('click','a',function(){
      $('.scroll_menu a').removeClass('active');
      $(this).addClass('active');
      $('.menu_tap').find('.item').hide()
      $('.menu_tap').find('.item').eq($(this).index()).fadeIn();

    })
  },
  render:function(){
    let _this = this;
    let item = this.props.itemList[0] || [];
    // console.log(serDet_item.hospitalId || '');
    var itemImage = item.itemImage || '',
        itemImage = !!itemImage != false?getServImg(itemImage,'_750_480',item.hospitalId,item.itemId):"",
        doctorPic = item.doctorPic || '',
        doctorPic = !!doctorPic != false?getDocImg(doctorPic,'_200_200',item.hospitalId,item.doctorId):"",
        caseList = this.props.caseList,
        doc_anli = this.props.doc_anli;
        $('#txt1').html(item.itemDetails)
    return(
      <div className="m_serv_det">
        <header>
          <div className="banner">
              <ImageLazy src={itemImage} style={{height:"4.8rem"}} />
          </div>
          <div className="info border_b1">
            <h4 className="top box">
              {item.itemName}{item.subtitle}
            </h4>
            <div className="price">&yen; {item.sellingPrice}</div>
            <s className="o_price">&yen; {item.originalPrice}</s>
          </div>
          <div className="promise box border_b1">
            <span><ImageLazy src={m_serv_det_icon1} />品质保证</span>
            <span><ImageLazy src={m_serv_det_icon2} />权威鉴定</span>
            <span><ImageLazy src={m_serv_det_icon3} />品质特卖</span>
          </div>
        </header>

        <div className="contant border_b1">
          <div className="top" id="doc_link">
            <span className="doc_h_pic" style={{'background-image':"url(" + doctorPic + ")"}}></span>
            <h4>
              <NavLink to={"/doc/det/" + item.doctorId}> {item.doctorName}·{item.doctorTitle} <ImageLazy src={arr_right} style={{'width':".14rem"}} /></NavLink>
              <small><NavLink to={"/hos/det/" + item.hospitalId}><font className="txt_ellip">{item.hospitalName}</font> <ImageLazy src={mall_vip} style={{"width":".26rem"}} />  <ImageLazy src={arr_right} style={{'width':".14rem"}} /></NavLink></small>
            </h4>
          </div>
          <div className="scroll_menu">
            <div className="wrapper border_b1 border_t1 box">
              <a href="javascript:void(0)" className="active">项目详情</a>
              <a href="javascript:void(0)">项目案例</a>
              <a href="javascript:void(0)">购买须知</a>
            </div>
          </div>
          <div className="item_wrapper">

            <div className="menu_tap">
            <div className="item" style={{display:"block"}}>
              <div className="txt" id="txt1" ref="txt1">
              </div>
            </div>
            <div className="item">
            {
              doc_anli.map(function(this_item,index){
                  let imgSrc = getCaseImg(this_item.beforePic,"_750_480",this_item.hospitalId,this_item.itemId)
                return(
                  <div>
                  <div className="wrapper" id="serv_link">
                    <ImageLazy src={imgSrc} style={{width:'100%'}} />
                  </div>
                  </div>
                )
              })
            }
            </div>
              <div className="item">
                <div className="txt_sty_c mytxt notice">
                  <div className="wrapper">
                    <div>
                      <span>消费流程</span>
                      <p>
                        <font>1、</font>下单并支付预约金；<br/>
                        <font>2、</font>联系医生咨询预约面诊；<br/>
                        <font>3、</font>手术前将服务码给医生进行验证，并支付剩余款项。
                      </p>
                    </div>
                    <div>
                      <span>如何预约</span>
                      <p>
                        从“我的”——“我的订单”——“未消费”中找到订单，点击“联系医生”，和医生预约面诊时间。
                      </p>
                    </div>
                    <div>
                      <span>如何退款</span>
                      <p>
                        <font>1、</font>未消费且未验证的订单，从“我的”——“我的订单”——“未消费”中找到订单，点击“申请退款”，进入页面选择真实退款原因后提交退款申请。<br/>
                        <font>2、</font>提交退款申请并审核通过后，订单实际支付的款项会退还到微信支付，实际到账时间以微信支付平台处理后的到账时间为准。
                      </p>
                    </div>
                    <div>
                      <span>消费须知</span>
                      <p>
                        <font>1、</font>请确定手术后，再将服务码交给医生，服务码交给医生后，视为已经手术，您将无法退款。<br/>
                        <font>2、</font>下单后，您到医院还需缴纳剩余款项，即：总费用=预付款+到院支付金额。此外，因医疗系统规定，机构可能还会收取挂号、检查等小额费用。
                      </p>
                    </div>
                    <div>
                      <span>声明</span>
                      <p>
                        美人谷是已经通过「国家药监局」和 「中华人民共和国国家卫生和计划生育委员会」审核批准的正规整形美容预订平台。所有能够通过美人谷在线预订的整形项目均通过严格审核、合法合规、并有美人谷先行赔付保障，请放心预订！
                      </p>
                    </div>
                  </div>
                </div>
                <a href="javascript:void(0)" className="more">
                  MORE <em>&#9660;</em>
                </a>
              </div>
            </div>

          </div>
        </div>
        <div style={{height:"2.26rem"}}></div>
        <div className="fixed_b_menu border_t1 border_b1 box">
          <div className="top">预约金：¥ {item.appointmentPrice} 　 到院再付：¥ {item.sellingPrice - item.appointmentPrice}</div>
          <div className="menu">
            <a href="tel:400-886-8382" className="add_shopcar">电话咨询</a>
            <a href="javascript:void(0)" className="buy_now">立即购买</a>
          </div>
        </div>
      </div>
    )
  }
})

let mapStateToProps = (state,ownProps)=>{

  var servDet_arr = state.user.mall_them_hos_servItem_det || [],
      doc_anli = state.mall.mall_them_doc_anli || [],
      itemList = servDet_arr.itemList || [],
      caseList = servDet_arr.caseList || [],
      itemId = itemList[0] && itemList[0].itemId,
      hospitalId = itemList[0] && itemList[0].hospitalId,
      user_shop_list = state.user.user_shop_list || [],
      user_logined = state.user.user_logined || false,
      userId = state.user.userId || 0;
      // console.log(state.user.userId)
  return{
    itemList,
    caseList,
    doc_anli,
    itemId,
    hospitalId,
    userId,
    user_logined,
    id:ownProps.params.id
  }
}

export default connect(mapStateToProps)(myDefault);
